<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      title="精确查询条件"
      @ok="handleSubmit"
      :destroyOnClose="true"
      :minHeight="400"
      :width="800"
    >
      <Row>
        <Col :span="12"
          ><div style="overflow-y: scroll; overflow-x: hidden; height: 400px">
            <BasicTree :treeData="treeData" :toolbar="true" :search="true" @select="selectTree"
          /></div>
        </Col>
        <Col :span="12">
          <BasicTable
            @register="registerTable"
            @edit-end="handleEditEnd"
            @edit-cancel="handleEditCancel"
            :beforeEditSubmit="beforeEditSubmit"
            :dataSource="dataSource"
          />
        </Col>
      </Row>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicTree } from '/@/components/Tree/index';
  import { Row, Col } from 'ant-design-vue';
  import { getExactColumns } from './data';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const treeData = ref<any>([
    {
      title: '图文档',
      key: '0-0',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '0-0-0' },
        {
          title: 'leaf',
          key: '0-0-1',
        },
      ],
    },
    {
      title: '零件',
      key: '1-1',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '1-1-0' },
        { title: 'leaf', key: '1-1-1' },
      ],
    },
    {
      title: '产品分类',
      key: '2-2',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '2-2-0' },
        { title: 'leaf', key: '2-2-1' },
      ],
    },
  ]);
  const selectedTreeKey = ref<string>('');
  const dataSource = ref<any>([
    {
      attributeName: '测试1',
      attributeValue: '测试值1',
    },
  ]);

  const selectTree = (selectedKeys) => {
    selectedTreeKey.value = selectedKeys[0];
  };

  const handleSubmit = () => {
    closeModal();
  };

  const handleEditEnd = ({ record, index, key, value }: Recordable) => {
    console.log(record, index, key, value);
    return false;
  };

  const handleEditCancel = () => {
    console.log('cancel');
  };

  const beforeEditSubmit = async ({ record, index, key, value }) => {
    console.log('单元格数据正在准备提交', { record, index, key, value });
    return await feakSave({ id: record.id, key, value });
  };

  const feakSave = ({ value, key, id }) => {
    createMessage.loading({
      content: `正在模拟保存${key}`,
      key: '_save_fake_data',
      duration: 0,
    });
    return new Promise((resolve) => {
      setTimeout(() => {
        if (value === '') {
          createMessage.error({
            content: '保存失败：不能为空',
            key: '_save_fake_data',
            duration: 1,
          });
          resolve(false);
        } else {
          createMessage.success({
            content: `记录${id}的${key}已保存`,
            key: '_save_fake_data',
            duration: 1,
          });
          resolve(true);
        }
      }, 1000);
    });
  };

  const [register, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({ confirmLoading: false });
  });

  // 初始化表格
  const [registerTable, { getDataSource }] = useTable({
    columns: getExactColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    canResize: false,
    rowKey: 'id',
  });
</script>

<style scoped></style>
